<template>
  <div class="app-container">
    <div class="login-container">
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="用户名">
          <el-input v-model="form.userName" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item>
          <div style="padding: 0 120px">
            <el-button type="primary" @click="onSubmit">登录</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {ref, getCurrentInstance, onMounted} from 'vue'
import webApi from "@/api/webApi";

const form = ref({
  userName: 'admin',
  password: '123456',
  ifRemember:'',
})
const { proxy } = getCurrentInstance()

const onSubmit = () => {

  // proxy.request({
  //   url: '/hello',
  //   method: 'get',
  // })

  proxy.request({
    url: proxy.webApi.login,
    method: 'post',
    data: form.value,
    contentType:  'multipart/form-data' ,
  }).then((res)=>{

  })
}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 使容器高度占满整个视口 */
  background-color: rgba(255, 255, 255, 0.4);
}

.login-container {
  padding: 0 20px;
  width: 100%;
  max-width: 600px; /* 限制最大宽度 */
}
</style>
